<template>
  <div class="all">
    <div class="C-nav">
      <el-date-picker
                v-model="time1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                size="mini"
                >
              </el-date-picker>
              <span>  用户名：<input type="text" placeholder="请输入用户名" v-model="condition.name"></span>
               <span>对象用户名：<input type="text" placeholder="请输入用户名" v-model="condition.target"></span>
      <span> <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">搜索</el-button></span>
    </div>
<div class="C-body">
  <el-table :data="list">
<el-table-column align="center" type="index" label="序号"></el-table-column>
<el-table-column align="center" prop="userName" label="用户名"></el-table-column>
<el-table-column align="center" prop="nickName" label="昵称"></el-table-column>
<el-table-column align="center" prop="telephone" label="手机号"></el-table-column>
<el-table-column align="center" prop="earnBean" label="金币"></el-table-column>
<el-table-column align="center" label="操作">
  <template slot-scope="scope">
    <el-button type="primary" size="mini" @click="Viewdetails(scope.row)">查看打赏纪录</el-button>
  </template>
</el-table-column>
  </el-table>
  <div class="Page" v-show="condition.quantity >condition.pageSize">
        <el-pagination
        background
        hide-on-single-page
        
          @current-change="handleCurrentChange"
          :current-page="condition.pageIndex"
          :page-size="condition.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="condition.quantity">
        </el-pagination>

  </div>

</div>
<div class="hide"  v-if="msg">
<div class="Popup">
   <h3>打赏记录<i class="el-icon-circle-close" @click="msg=false"></i></h3>
   <el-table :data="detailsList">
  <el-table-column align="center" type="index" label="序号"></el-table-column>
  <el-table-column align="center" prop="userName" label="收礼用户名"></el-table-column>
  <el-table-column align="center" prop="nickName" label="收礼昵称"></el-table-column>
  <el-table-column align="center" prop="giftName" label="收到礼物名称"></el-table-column>
  <el-table-column align="center" prop="giftNum" label="礼物个数"></el-table-column>
  <el-table-column align="center" prop="addTime" label="赠送时间"></el-table-column>
   </el-table>
     <el-pagination
       layout="prev, pager, next"
       :total="Detacond.quantity"
       :current-page="Detacond.pageIndex"
       :page-size="Detacond.pageSize"
       hide-on-single-page
       @current-change="DetapreviousPage"
       >
       </el-pagination>
</div>
</div>
  </div>
</template>

<script>
  import {UserGet,getRecords} from '@/utils/API'
   import Cookies from 'js-cookie'
  export default {
      data() {
        return {
          time1:'',
          condition:{
            pageIndex:1,
            pageSize:10,
            quantity:50,
          },
          Detacond:{
            pageIndex:1,
            pageSize:10,
            quantity:50,
                  },
                  userId:'',
          detailsList:[],
          admin:{
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token')
          },
          list:[],
          msg:false
          }
          },
           methods:{
              //详情翻页
             DetapreviousPage(val){
               console.log(val)
               this.Detacond.pageIndex=val
                getRecords(this.userId,this.admin,this.Detacond).then(res=>{
                  if(res.code==0){
                    this.detailsList=res.data.giftSendRecordRespList
                  }
                })
             },
             search(){
              this.condition.time1= this.time1[0]
              this.condition.time2=this.time1[1]
              if(this.condition.name){}else{
                delete this.condition.name
              }
              console.log(this.condition)
             },
             handleCurrentChange(val) {
                  this.condition.pageIndex=val
                UserGet(this.admin,this.condition).then(res=>{
                  this.list=res.data.members
                  this.condition.quantity=res.data.sum
                  console.log(res)
                })
             },
             //获取详情数据
          Viewdetails(e){
            this.userId=e.userId
            getRecords(e.userId,this.admin,this.Detacond).then(res=>{
              if(res.code==0){
                this.detailsList=res.data.giftSendRecordRespList
                this.Detacond.quantity=res.data.total
                this.msg=true
              }
            })
          }
            },
              mounted() {
                UserGet(this.admin,this.condition).then(res=>{
                  this.list=res.data.members
                  this.condition.quantity=res.data.sum
                  console.log(res)
                })
              }
          }
</script>

<style lang="scss" scoped>
  .C-nav{
    display: inline-flex;
    border-bottom: 1px solid #eee;
    height: 45px;
    width: 100%;
  }
  span{
    display: flex;
    width: 257px;
    font-size: 14px;
    margin-left: 5px;
    line-height: 30px;
        height: 30px;
  }
  input{
    border: 1px solid #DCDFE6;
    border-radius: 5px;
  }
  .Page{
    margin: auto;
    width: 50%;
  }
.hide{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;

}
.Popup{
  width: 49%;
  padding-bottom: 10px;
  background-color: #fff;
  position: fixed;
    top: 34vh;
    left: 28%;
  text-align: center;
  z-index: 9;
  border-radius: 5px;
      border: 1px solid #eee;
  h3{
    text-align: left;
    padding: 5px 0 5px 6px;
  }
 .el-textarea{
        width: 80%;
        margin: 2% auto;
        display: block;
  }
  .Tips{
      font-size: 12px;
      padding-top: 5px;
      color: #999;
  }
  /deep/ .el-table td,/deep/ .el-table th{
    padding: 2px 0;
  }
}

</style>
